import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HomePage } from '../home/home.page';
import { CustomPage } from '../custom-page/custom-page.page';
import { SecureStorageService } from '../../../../shared/services/secure-storage.services';
import { MyProfilePage } from "../my-profile-page/my-profile.page";
import { NavParams } from 'ionic-angular';
import { TabService } from '../../../work-station/service/tab.service';
import { Tab } from '../../models/tab.modle';
import * as LANG from '../../../../util/constant';

@Component({
  templateUrl: 'tabs.page.html'
})

export class TabsPage implements OnInit {

  tabs: Array<Tab> = [{
    name: '首页',
    url: 'home',
    isAvailable: 1
  }, {
    name: '运营管控',
    url: 'app',
    isAvailable: 1
  }, {
    name: '移动协办',
    url: 'me',
    isAvailable: 1
  }, {
    name: '移动秘书',
    url: 'me',
    isAvailable: 1
  }, {
    name: '南网资讯',
    url: 'me',
    isAvailable: 1
  }];
  tabComps = {};
  role: string;
  isShow: boolean = false;
  tab1Root = HomePage;
  tab2Root = "OperationalControlPage";
  tab3Root =  MyProfilePage;

  // tab1Root = HomePage;
  // tab2Root = "ApplicationsPage";
  // tab3Root =  '';
  // tab4Root =  LeaderplatePage;

  constructor(
    private storage: SecureStorageService,
    public navParams: NavParams,
    public ref: ChangeDetectorRef,
    public tabService: TabService
  ) {
    this.role = this.navParams.get('role');
    this.tabComps = {
      app: { comp: 'OperationalControlPage', icon: 'contacts' },
      me: { comp: MyProfilePage, icon: 'information-circle' },
      // add: { comp: null, icon: 'md-add' },
      // custom: { comp: CustomPage, icon: 'icon-icon-test2' },
    };
    // this.tabService.tabChangeStatus$.subscribe((tab) => {
    //   const optTab = this.tabs.find((t) => t.id === tab.id);
    //   if (optTab) {
    //     optTab.isAvailable = tab.isAvailable;
    //   } else {
    //     this.reloadTab();
    //   }
    // });
    // this.reloadTab();
  }

  ngOnInit() {

    // this.tab1Root = HomePage;
    // this.storage.get('role').subscribe((res) => {
    //   this.role = res;
      // this.tab1Root = "MockDataPage";

    // });

    console.log(this.role);
    if (this.role && this.role.indexOf('leader') > -1) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    // this.isShow = true;
    // this.tab2Root = "ApplicationsPage";
    // this.tab3Root =  MyProfilePage;
  }

  reloadTab() {
    this.tabService.loadTabs().then((res) => {
      const tabs: Array<Tab> = [];
      tabs.map((tab) => {
        const _t = this.tabs.find((_tab) => _tab.name === tab.name);
        if (_t) {
          Object.assign(_t, tab);
        }
      });
      tabs.filter((t) => {
        const at = this.tabs.find((_t) => _t.id === t.id);
        if (!at) {
          this.tabs.push(t);
        } else {
          at.isAvailable = t.isAvailable;
        }
      });
      this.tabs.map((tab) => {
        if (tab.url === 'add') {
          tab.isAvailable = 0;
        }
      });
      this.tabs.push({
        name: '',
        url: 'add',
        isAvailable: 1
      });
    });
  }

  changeColor(tab: Tab) {
    if (tab.url === 'add') {
      const tabName = prompt(LANG.INPUT_TAB);
      if (!tabName) {
        return;
      }
      this.tabService.saveTab({name: tabName, url: 'custom', isAvailable: 1}).then((_res) => {
        this.reloadTab();
      }, (err) => alert(LANG.HANDLE_ERROR));
    }
  }
}
